<template>
  <a-card :bordered="false">
    <div>
      <!--表头条件搜索  -->
      <a-form-model layout="inline" :model="caseform">
        <a-form-model-item
          ><a-input placeholder="case编号" style="width: 150px" v-model="caseform.caseId"></a-input
        ></a-form-model-item>
        <a-form-model-item>
          <a-select placeholder="请选择项目组" v-model="caseform.projectId" style="width: 150px">
            <a-select-option v-for="(projectTeam, index) in projectTeams" :key="index + 1">{{
              projectTeam.teamName
            }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-select placeholder="请选择case类型" v-model="caseform.caseType" style="width: 150px">s
            <a-select-option v-for="(caseType, index) in caseTypeList" :key="index + 1">{{
              caseType.typeName
            }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-select placeholder="请选择case状态" v-model="caseform.caseStatus" style="width: 150px">
            <a-select-option v-for="(caseStatus, index) in caseStatusList" :key="index + 1">{{
              caseStatus.statusName
            }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          ><a-month-picker placeholder="请选择投产日期" style="width: 150px" v-model="caseform.caseTime"
        /></a-form-model-item>
        <a-form-model-item>
          <a-select placeholder="请选择责任人" v-model="caseform.principal" style="width: 150px">
            <a-select-option v-for="principal in principalList" :key="principal.username">{{
              principal.realname
            }}</a-select-option></a-select
          >
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }"
          ><a-button type="primary" icon="search" @click="handleSubmit">搜索</a-button></a-form-model-item
        >
        <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }"
          ><a-button type="primary" icon="sync" @click="resetForm">重置</a-button></a-form-model-item
        >
      </a-form-model>
      <br />
      <!-- 主体表格内容 -->
      <div style="margin-bottom: 16px">
        <a-button type="primary" :disabled="!hasauditSelected" icon="pushpin" @click="auditCase">审核</a-button
        >&nbsp;&nbsp;
        
        <a-button type="primary" :disabled="!hasSelected" icon="pushpin" @click="downloadCase">下载</a-button
        >
      </div>
      <a-table
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :columns="columns"
        :data-source="data"
        :pagination="false"
        :scroll="{ x: 1750 }"
      >
        <a slot="name" slot-scope="text, record" @click="editCase(record)">{{ text }}</a>
      </a-table>
      <br />
      <!-- 分页组件 -->
      <a-pagination v-model="currentpage" :total="total" :pageSize="pageSize" @change="pageChange" />
      <!-- case详情编辑modal -->
      <a-modal v-model="editCaseModal" title="Case详情" width="80%" @ok="editOk">
        <!-- <p>{{ editCaseForm }}</p> -->
        <a-descriptions bordered :column="4">
          <a-descriptions-item label="case编号" :span="2">
            {{ editCaseForm.caseDTO.caseId }}
          </a-descriptions-item>
          <a-descriptions-item label="case概要" :span="2">
            {{ editCaseForm.caseDTO.caseInfo }}
          </a-descriptions-item>
          <a-descriptions-item label="项目组">
            网点平台
            <!-- {{
              projectTeams[editCaseForm.caseDTO.projectId] == null
                ? null
                : projectTeams[editCaseForm.caseDTO.projectId].teamName
            }} -->
          </a-descriptions-item>
          <a-descriptions-item label="开发人员">
            {{ editCaseForm.caseDTO.principal }}
          </a-descriptions-item>
          <a-descriptions-item label="投产日期">
            {{ editCaseForm.caseDTO.caseTime }}
          </a-descriptions-item>
          <a-descriptions-item label="申请人">
            {{ editCaseForm.caseDTO.createBy }}
          </a-descriptions-item>
          <a-descriptions-item label="case描述">
            {{ editCaseForm.caseDTO.caseDesc }}
          </a-descriptions-item>
        </a-descriptions>
        <br /><br />
        <!-- caseStatus步骤条-->
        <a-steps
          :current="this.editCaseForm.currentCaseStatus.statusId - 1"
          type="navigation"
          size="small"
          :style="stepStyle"
        >
          <a-step
            v-for="item in this.editCaseForm.finishList"
            :key="item.statusName"
            status="finish"
            size="small"
            :title="item.statusName"
          />
          <a-step status="process" size="small" :title="this.editCaseForm.currentCaseStatus.statusName" />
          <a-step
            v-for="item in this.editCaseForm.processList"
            :key="item.statusName"
            status="wait"
            size="small"
            :title="item.statusName"
          />
        </a-steps>
        <div>
          <a-tabs type="card" defaultActiveKey="0">
            <a-tab-pane key="0"
              ><span slot="tab"><a-icon type="file-text" />需求详情</span>
              <a-card :bordered="false" style="width: 100%">
                <a-descriptions bordered :column="4">
                  <a-descriptions-item label="需求编号" :span="2">
                    {{ editCaseForm.demand.id }}
                  </a-descriptions-item>
                  <a-descriptions-item label="需求名称" :span="2">
                    {{ editCaseForm.demand.name }}
                  </a-descriptions-item>
                  <a-descriptions-item label="OA联系单号">
                    {{ editCaseForm.demand.oaCode }}
                  </a-descriptions-item>
                  <a-descriptions-item label="业务部门">
                    {{ editCaseForm.demand.bussinessDepart }}
                  </a-descriptions-item>
                  <a-descriptions-item label="期望上线日期">
                    {{ editCaseForm.demand.expectDate }}
                  </a-descriptions-item>
                  <a-descriptions-item label="平台联系人">
                    {{ editCaseForm.demand.contact }}
                  </a-descriptions-item>
                  <a-descriptions-item label="调用方系统">
                    {{ editCaseForm.demand.customerSystem }}
                  </a-descriptions-item>
                  <a-descriptions-item label="调用方负责人">
                    {{ editCaseForm.demand.customer }}
                  </a-descriptions-item>
                  <a-descriptions-item label="需求来源">
                    {{ editCaseForm.demand.source }}
                  </a-descriptions-item>
                  <a-descriptions-item label="数据来源系统">
                    {{ editCaseForm.demand.datasource }}
                  </a-descriptions-item>
                  <a-descriptions-item label="用户查询行为" :span="2">
                    {{ editCaseForm.demand.userQuery }}
                  </a-descriptions-item>
                  <a-descriptions-item label="接入联系必要性" :span="2">
                    {{ editCaseForm.demand.nessessary }}
                  </a-descriptions-item>
                  <a-descriptions-item label="需求说明">
                    {{ editCaseForm.demand.description }}
                  </a-descriptions-item>
                </a-descriptions>
              </a-card>
            </a-tab-pane>
            <a-tab-pane v-for="(addpane, index) in editCaseForm.transMap" :key="index + 1">
              <span slot="tab"
                ><a-icon type="pushpin" />{{ editCaseForm.transMap[index].trans.transCode }}-{{
                  editCaseForm.transMap[index].trans.transName
                }}</span
              >
              <a-card :bordered="false">
                <a-descriptions bordered>
                  <a-descriptions-item label="交易名称">
                    {{ editCaseForm.transMap[index].trans.transName }}
                  </a-descriptions-item>
                  <a-descriptions-item label="交易码">
                    <a-select v-model="editCaseForm.transMap[index].trans.transCode" style="width: 150px">
                      <a-select-option v-for="transcode in transcodeList" :key="transcode.transCode">{{
                        transcode.transCode
                      }}</a-select-option>
                    </a-select>
                  </a-descriptions-item>
                  <a-descriptions-item label="是否涉及分组聚合查询">
                    {{ editCaseForm.transMap[index].trans.isGroup == 1 ? '是' : '否' }}
                  </a-descriptions-item>
                </a-descriptions>
                <br /><br />
                <a-tabs default-active-key="1">
                  <a-tab-pane key="1">
                    <span slot="tab"><a-icon type="tags" />输入</span>
                    <a-table :columns="transcolumns" :data-source="editCaseForm.transMap[index].inputTable"></a-table>
                  </a-tab-pane>
                  <a-tab-pane key="2">
                    <span slot="tab"><a-icon type="tags" />输出</span>
                    <a-table :columns="transcolumns" :data-source="editCaseForm.transMap[index].outputTable"></a-table>
                  </a-tab-pane>
                </a-tabs>
                <a-card>{{ editCaseForm.transMap[index].sql.sqlName }}</a-card>
              </a-card>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-modal>
      
    </div>
  </a-card>
</template>

<script>
import {
  getCaseStatus,
  getTypeList,
  getProTeamList,
  getCaseList,
  getCaseDetail,
  returnCase,
  auditCase,
  getPrincipalList,
  orderCase,
  editCase,
  downloadFile
} from '@/api/case/case'
import { getTranCodeList } from '@/api/trans/tran'
import moment from 'moment'
import 'moment/locale/zh-cn'
export default {
  data() {
    return {
      
      orderModal: false,
      createcaseId: '',
      caseInfoModal: false,
      transInputdata: [],
      transOutputdata: [],
      transcolumns: [
        { title: '英文名称', dataIndex: 'enName', key: 'enName', width: 200 },
        { title: '中文名称', dataIndex: 'cnName', key: 'cnName', width: 200 },
        { title: '数据类型', dataIndex: 'dataType', key: 'dataType', width: 200 },
        { title: '是否必输', dataIndex: 'inputNeccessary', key: 'inputNeccessary', width: 200 },
        { title: '查询逻辑', dataIndex: 'queryLogic', key: 'queryLogic', width: 600 },
      ],
      moment,
      transcodeList: [],
      currentpage: 1,
      total: 0,
      pageSize: 8,
      editCaseForm: {
        caseDTO: { caseStatus: 0, projectId: '', caseType: '' },
        finishList: {},
        processList: {},
        currentCaseStatus: { statusId: 0 },
        demand: {},
        transMap: [],
        trans: {},
        sql: {},
      },
      stepStyle: {
        marginBottom: '60px',
        boxShadow: '0px -1px 0 0 #e8e8e8 inset',
      },
      editCaseModal: false,
      caseform: {
        caseId: '',
        caseTime: '',
      },
      principalList: [],
      caseStatusList: [],
      caseTypeList: [],
      projectTeams: [],
      data: [],
      columns: [
        { title: 'case编号', dataIndex: 'caseId', key: 'caseId', fixed: 'left', scopedSlots: { customRender: 'name' } },
        { title: '项目组', dataIndex: 'projectId', key: 'projectId', width: 120 },
        { title: 'case类型', dataIndex: 'caseType', key: 'caseType', width: 220 },
        { title: 'case概要', dataIndex: 'caseDesc', key: 'caseDesc', width: 250 },
        { title: '投产日', dataIndex: 'caseTime', key: 'caseTime', width: 150 },
        { title: 'case状态', dataIndex: 'caseStatus', key: 'caseStatus', width: 120 },
        { title: '开发负责人', dataIndex: 'principal', key: 'principal', width: 120 },
        { title: '最后更新时间', dataIndex: 'modifyTime', key: 'modifyTime', width: 150 },
        { title: '申请人', dataIndex: 'createBy', key: 'createBy', width: 120 },
        { title: '提交时间', dataIndex: 'createTime', key: 'createTime', width: 150 },
      ],
      selectedRowKeys: [], // Check here to configure the default column
      selectCase: [],
    }
  },

  created() {
    this.getStatusList()
    this.getTypeList()
    this.getProTeamList()
    this.getCaseList()
    this.getTranCodeList()
    this.getPrincipal()
  },

  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
    hasauditSelected() {
      let statusList = this.selectCase.map((item) => item.caseStatus)
      let auditflag = true
      for (var i = 0; i < statusList.length; i++) {
        if (statusList[i] != '审核中') {
          auditflag = false
        }
      }
      return this.selectedRowKeys.length > 0 && auditflag
    },
  
    hasexportSelected() {
      let statusList = this.selectCase.map((item) => item.caseStatus)
      let auditflag = true
      for (var i = 0; i < statusList.length; i++) {
        if (statusList[i] != '申请接口') {
          auditflag = false
        }
      }
      return this.selectedRowKeys.length > 0 && auditflag
    },
  },

  methods: {
    onSelectChange(selectedRowKeys) {
      var selectCase = []
      for (var i = 0; i < selectedRowKeys.length; i++) {
        selectCase.push(this.data[selectedRowKeys[i]])
      }
      this.selectCase = selectCase
      this.selectedRowKeys = selectedRowKeys
    },

    handleSubmit() {
      this.selectedRowKeys = []
      getCaseList(this.caseform, 1, this.pageSize).then((res) => {
        this.data = res.result.caseDTO
        this.total = res.result.total
      })
    },

    resetForm() {
      this.selectedRowKeys = []
      this.caseform = {
        caseId: '',
        caseTime: '',
      }
      getCaseList(this.caseform, 1, this.pageSize).then((res) => {
        this.data = res.result.caseDTO
        this.total = res.result.total
      })
    },

    getStatusList() {
      getCaseStatus().then((res) => {
        this.caseStatusList = res.result
      })
    },

    getTranCodeList() {
      getTranCodeList().then((res) => {
        if (res.code == 200) {
          this.transcodeList = res.result
        }
      })
    },

    editCase(text) {
      this.transInputdata = []
      this.transOutputdata = []
      getCaseDetail(text.caseId).then((res) => {
        this.editCaseForm.caseDTO = res.result.caseDTO
        this.editCaseForm.finishList = res.result.finishList
        this.editCaseForm.processList = res.result.processList
        this.editCaseForm.currentCaseStatus = res.result.currentCaseStatus
        this.editCaseForm.demand = res.result.demand
        this.editCaseForm.transMap = res.result.transMap
      })
      this.editCaseModal = true
    },

    getTypeList() {
      getTypeList().then((res) => {
        this.caseTypeList = res.result
      })
    },

    getProTeamList() {
      getProTeamList().then((res) => {
        this.projectTeams = res.result
      })
    },

    getCaseList() {
      getCaseList(this.caseform, this.currentpage, this.pageSize).then((res) => {
        this.data = res.result.caseDTO
        this.total = res.result.total
      })
    },

    editOk() {
      editCase(this.editCaseForm).then((res) => {
        //console.log(res)
        if (res.code == 200) {
          this.getCaseList()
          this.$message.success('交易码分配成功')
          this.editCaseModal = false
        } else {
          this.$message.error(res.message)
          this.editCaseForm.trans.transCode = undefined
        }
      })
    },

    pageChange() {
      this.selectedRowKeys = []
      getCaseList(this.caseform, this.currentpage, this.pageSize).then((res) => {
        this.data = res.result.caseDTO
        this.total = res.result.total
      })
    },

    auditAction() {
      auditCase(this.selectCase.map((item) => item.caseId)).then((res) => {
        if (res.code == 200) {
          this.getCaseList()
          this.$message.success('case审核成功')
          this.selectedRowKeys = []
        } else {
          this.$message.error(res.message)
        }
      })
    },

    returnAction() {
      returnCase(this.selectCase.map((item) => item.caseId)).then((res) => {
        if (res.code == 200) {
          this.getCaseList()
          this.$message.success('case退回成功')
          this.selectedRowKeys = []
        } else {
          this.$message.error(res.message)
        }
      })
    },

    auditCase() {
      this.$confirm({
        title: '如何操作以下case?',
        okText: '审核',
        cancelText: '退回',
        onOk: () => {
          this.auditAction()
        },
        onCancel: () => {
          this.returnAction()
        },
        class: 'test',
      })
    },

    

    
    getPrincipal() {
      getPrincipalList().then((res) => {
        this.principalList = res.result
      })
    },

    downloadCase(){
       this.selectCase.map(item=>{
         downloadFile('HDS-'+item.caseId+'.xlsx').then(res=>{
             let blob = new Blob([res], 
                      {type: 'application/vnd.ms-excel', //将会被放入到blob中的数组内容的MIME类型
                      })
                      let objectUrl = URL.createObjectURL(blob) //生成一个url
                      let a = document.createElement('a')
                      a.href = objectUrl
                      a.download = item.caseId
                      a.click()
                      window.URL.revokeObjectURL(objectUrl)
         })
       })
    }
  },
}
</script>

<style scoped>
@import '~@assets/less/common.less';
.upload-demo {
  display: inline-block;
}
.card-container {
  background: #f5f5f5;
  overflow: hidden;
  padding: 24px;
}
.card-container > .ant-tabs-card > .ant-tabs-content {
  height: 120px;
  margin-top: -16px;
}

.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  background: #fff;
  padding: 16px;
}

.card-container > .ant-tabs-card > .ant-tabs-bar {
  border-color: #fff;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  border-color: transparent;
  background: transparent;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  border-color: #fff;
  background: #fff;
}
</style>